<template>
    <div class="main-content">
        <!-- 轮播图部分-->
        <el-row>
            <el-col :span="24">
                <Carousel/>
            </el-col>
        </el-row>
        <!-- 推荐歌单部分-->
        <el-row>
            <el-col :span="24">
                <SongPart :music-list="recommendItem"/>
            </el-col>
        </el-row>
        <!--推荐歌手部分-->
        <el-row>
            <el-col :span="24">
                <ImageSwiper :music-list="recommendSinger"/>
            </el-col>
        </el-row>
        <!-- 新专速递部分-->
        <el-row>
            <el-col :span="24">
                <SongPart :music-list="albumItem"/>
            </el-col>
        </el-row>
        <!-- 榜单推荐部分-->
        <el-row>
            <el-col :span="24">
                <SongPart :music-list="topList"/>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Carousel from "@/components/Carousel.vue";
import SongPart from "@/components/SongPart.vue";
import {getAlbum, getRecPlayList, getSinger, getTopList} from "@/http";
import {publicFun} from "@/mixin";
import ImageSwiper from "@/components/ImageSwiper.vue";
import {ALBUMLIST, RECSONGLIST, SINGERLIST, TOPLIST, UPDATELIST} from "@/http/constant";
import {formatArray} from "@/http/tools";

export default {
    name: "mainPage",
    components: {
        ImageSwiper,
        Carousel,
        SongPart
    },
    mixins: [publicFun],
    data() {
        return {
            recommendMusicList: [],
            albumList: [],
            recommendSingerList: [],
            allTopList: [],
            showTopList: []
        }
    },
    methods: {
        updateShowList(d) {
            if (d.type === RECSONGLIST) {
                this.getRecMusicList()
            } else if (d.type === ALBUMLIST) {
                this.getAlbumList()
            } else if (d.type === SINGERLIST) {
                this.getSinger()
            } else if (d.type === TOPLIST) {
                this.showTopList = this.getSpecialNumRandom(this.allTopList, 5)
            }
        },
        // 获取推荐歌单列表
        getRecMusicList() {
            getRecPlayList(10).then(res => {
                if (res.code === 200) {
                    this.recommendMusicList = formatArray(2, 5, res.result)
                }
            }, err => {
                console.log(`推荐歌单获取失败：${err.message}`)
            })
        },
        // 获取新专辑
        getAlbumList() {
            const offset = Math.floor(Math.random() * 100)
            getAlbum(10, offset).then(res => {
                const {code, albums} = res
                if (code === 200) {
                    this.albumList = formatArray(2, 5, albums)
                }
            }, err => {
                console.log(`新专速递获取失败：${err.message}`)
            })
        },
        // 获取热门歌手
        getSinger() {
            getSinger(10).then(res => {
                if (res.code === 200) {
                    this.recommendSingerList = formatArray(1, 10, res.artists)
                }
            }, err => {
                console.log(`新专速递获取失败：${err.message}`)
            })
        },
        // 获取排行榜
        getTopList() {
            getTopList().then(res => {
                if (res.code === 200) {
                    // 存储的是所有的榜单
                    this.allTopList = res.list
                }
            }, err => {
                console.log(`排行榜获取失败：${err.message}`)
            })
        }
    },
    created() {
        this.getRecMusicList()
        this.getAlbumList()
        this.getSinger()
        this.getTopList()
    },
    mounted() {
        this.$bus.$on(UPDATELIST, this.updateShowList)
    },
    computed: {
        recommendItem() {
            return {
                title: "推荐歌单",
                // 0表示是推荐歌单
                type: RECSONGLIST,
                specialRoutes: "#",
                musicList: this.recommendMusicList,
                isShowAll: true,
                isChange: true
            }
        },
        albumItem() {
            return {
                title: "新专速递",
                // 1表示是新专速递
                type: ALBUMLIST,
                specialRoutes: "#",
                musicList: this.albumList,
                isShowAll: true,
                isChange: true
            }
        },
        recommendSinger() {
            return {
                title: "热门歌手",
                // 2表示热门歌手
                type: SINGERLIST,
                specialRoutes: "#",
                musicList: this.recommendSingerList,
                isShowAll: true,
                isChange: true
            }
        },
        topList() {
            this.showTopList = this.allTopList.slice(0, 5)
            return {
                title: "排行榜",
                // 3表示是排行榜
                type: TOPLIST,
                specialRoutes: "#",
                musicList: formatArray(1, 5, this.showTopList),
                isShowAll: true,
                isChange: true
            }
        },
    },
}
</script>

<style scoped lang="less">
//.main-content {
//  width: 75%;
//  margin: 80px auto;
//}
</style>